<template>
  <div class="a">
    <el-form label-width="80px">

      <el-form-item class="item" label="第一航班">
        <el-input v-model="list.flightNumber"></el-input>
      </el-form-item>


      <el-form-item class="item" label="中转航班">
        <el-input v-model="list.secondFlightNumber"></el-input>
      </el-form-item>


      <el-form-item class="item" label="出发城市">
        <el-input v-model="list.startCity"></el-input>
      </el-form-item>


      <el-form-item class="item" label="抵达城市">
        <el-input v-model="list.endCity"></el-input>
      </el-form-item>
      <el-form-item class="item" label="出发机场">
        <el-input v-model="list.startAirport"></el-input>
      </el-form-item>

      <el-form-item class="item" label="中转机场">
        <el-input v-model="list.transitAirport"></el-input>
      </el-form-item>


      <el-form-item class="item" label="抵达机场">
        <el-input v-model="list.endAirport"></el-input>
      </el-form-item>

      <el-form-item class="item" label="出发日期">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="list.startDateTime"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item class="item" label="抵达日期">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="list.endDateTime"
                          style="width: 100%;"></el-date-picker>
        </el-col>

      </el-form-item>



      <span class="time">起飞时间</span>
      <el-time-select

        v-model="list.flightStartTime"
        :picker-options="{
    start: '00:00',
    step: '00:30',
    end: '23:59'
  }"
        placeholder="选择时间">
      </el-time-select>

      <br>
      <br>

      <span class="time">中转降落</span>
      <el-time-select
        v-model="list.transitEndTime"
        :picker-options="{
    start: '00:00',
    step: '00:30',
    end: '23:59'
  }"
        placeholder="选择时间">
      </el-time-select>
      <br>
      <br>

      <span class="time">中转起飞</span>
      <el-time-select
        v-model="list.transitStartTime"
        :picker-options="{
    start: '00:00',
    step: '00:30',
    end: '23:59'
  }"
        placeholder="选择时间">
      </el-time-select>
      <br>
      <br>

      <span class="time">降落时间</span>
      <el-time-select
        v-model="list.flightEndTime"
        :picker-options="{
    start: '00:00',
    step: '00:30',
    end: '23:59'
  }"
        placeholder="选择时间">
      </el-time-select>

      <br>
      <br>





      <el-form-item class="item" label="舱位等级">
        <el-input v-model="list.grade"></el-input>
      </el-form-item>


      <el-form-item class="item" label="票数">
        <el-input v-model="list.seating"></el-input>
      </el-form-item>


      <el-form-item class="item" label="票价">
        <el-input v-model="list.price"></el-input>
      </el-form-item>

      <el-form-item class="item" label="机票查询">
        <el-input v-model="list.flag"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click=" saveOrUpdate() " style="width: 300px">立即创建</el-button>
        <el-button style="width: 200px">取消</el-button>
      </el-form-item>


    </el-form>
  </div>
</template>
<script>
import PlaneApi from '../../../../api/pc/plane/transferInfoList'
import moment from 'moment'

export default {
  data() {

    return {
      list: {//传回去的集合
        id: '',
        flightNumber: '',
        secondFlightNumber: '',
        startCity: '',
        transitCity: '',
        endCity: '',
        startDateTime: '',
        transitEndTime: '',
        transitStartTime: '',
        endDateTime: '',
        grade: '',
        flightStartTime: '',
        flightEndTime: '',
        seating: '',
        price: '',
        flag: '',
        transitAirport:'',
        startAirport:'',
        endAirport:'',

      }
    }
  },

  created() {
    this.init()
  },

  watch: {
    $route(to, from) {//路有变化的方式  路由发生变化就会执行
      this.init()
    }
  },

  methods: {

    /**
     * 通过ID初始化值
     * @param id
     */

    getInfo(id) {
      PlaneApi.getPlaneById(id)
        .then(response => {
          this.list = response.data.plane
        })
    },

    /**
     * 判断路径是否有id
     */

    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getInfo(id)
      } else {
        this.list = {}
      }
    },

    /**
     * 根据plane是否有id
     * 判断修改还是添加
     */
    saveOrUpdate() {

      if (this.list.id) {
        //  添加
        this.updatePlane()

      } else {
        this.savePlane()
      }

    },

    //添加航班信息
    savePlane() {
      //封装日期转换
      var mystartDateTime = moment(this.list.startDateTime).format('yyyy-MM-DD')
      var myendDateTime = moment(this.list.endDateTime).format('yyyy-MM-DD')

      this.list.startDateTime = mystartDateTime
      this.list.endDateTime = myendDateTime

      //调用增加接口
      PlaneApi.addPlane(this.list)
        .then(response => {
          // 提示信息
          console.log('对了')
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          // 路由跳转
          this.$router.push({ path: '/plane/table/transfer' })
        })

    },

    updatePlane(list) {
      //封装日期转换
      var mystartDateTime = moment(this.list.startDateTime).format('yyyy-MM-DD')
      var myendDateTime = moment(this.list.endDateTime).format('yyyy-MM-DD')

      this.list.startDateTime = mystartDateTime
      this.list.endDateTime = myendDateTime

      //调用增加接口
      //修改航班信息
      PlaneApi.updatePlaneInfo(this.list)
        .then(response => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          // 路由跳转
          this.$router.push({ path: '/plane/table/transfer' })
        })
    }

  }
}
</script>
<style>
.a {
  border: #fff5f5 10px solid;
  border-radius: 30px;
  width: 850px;
  margin-top: 30px;
  margin-left: 250px;
  padding-right: 20px;
  padding-top: 10px;

}

/*<!--
 .item: 是绑定class的
 .el-form-item__label: 自动匹配form表单中label的(注意:中间是连续的两个'_')
-->*/

.item .el-form-item__label {
  color: black;
  padding-left: 0px;
}.time{
   margin-left: 11px;
   color: black;
   font-size: 15px;
   font-weight: bold;
 }
</style>
